<template>
	<view>
		<view>
			<navTop title="搜索" :isHeight="false" hasBgc="white" :color="navtop.color" :isBack="true"></navTop>
		</view>
		<view class="search" @click="show">
			<uni-search-bar @confirm="search" @input="input" v-model="searchContent"></uni-search-bar>
		</view>
		<view class="bottomBorder" v-show="showCard==1">
			<view class="actBorder" >
				<view class="actLine"></view>
				<view class="actTitle">活动</view>
				<actCard_heng
				v-for="(item,index) in actData"
				:imgId="item.imgId"
				:eventname="item.eventName"
				:item="item"></actCard_heng>
			</view>
			<view class="associationBorder">
				<view class="associationLine"></view>
				<view class="associationTitle">社团</view>
				<associationCard_heng
				v-for="(item,index) in accostionData"
				:imgId="item.imgId"
				:item="item"></associationCard_heng>
			</view>
		</view>
	</view>
</template>

<script>
	import navTop from '../../components/navTop.vue'
	import actCard_heng from '../../components/actCard_heng.vue'
	import associationCard_heng from '../../components/associationCard_heng.vue'
	export default {
		components: {
			navTop,
			actCard_heng,
			associationCard_heng
		},
		data(){
			return{
				navtop: {
					title: 'XXX',
					color: '#000000'
				},
				showCard:0,
				searchContent:'',
				actData:[],
				accostionData:[],
			}
		},
		methods:{
			show(){
				let that=this
				that.showCard=1
			},
			search(res){
				//回车之后进行搜索
				let that=this
				
				var data=res.value
				
				this.getActData(data)
				this.getAssotionData(data)
				
			
			},
			input(res){
				//console.log(res);
			},
			getActData(data){
				let that=this
				// console.log(data);
				uni.request({
					url:'https://www.codingyt.com/club/event/select',
					data:{
						event_name:data
					},
					success(res) {
						// console.log(res.data);
						that.actData=res.data.data
						
					},
				})
			},
			getAssotionData(data){
				let that=this
				uni.request({
					url:'https://www.codingyt.com/club/organization/select',
					data:{
						name:data
					},
					success(res) {
						console.log(res.data);
						that.accostionData=res.data.data
						
					},
				})
			}
		}
	}

</script>

<style>
	.search{
		top: 180rpx;
		width: 750rpx;
		position: absolute;
	}
	.bottomBorder{
		top: 300rpx;
		position: absolute;
	}
	.actLine{
		width: 6rpx;
		height: 36rpx;
		border-radius: 50rpx;
		background-color: rgba(245, 166, 35, 100);
		float: left;
		position: relative;
		top: 16rpx;
		left: 36rpx; 
	}
	.actTitle{
		position: relative;
		left: 50rpx;
		padding-bottom: 20rpx;
		width: 120rpx;
		height: 68rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 48rpx;
		text-align: left;
		  ;
	}
	.associationLine{
		width: 6rpx;
		height: 36rpx;
		border-radius: 50rpx;
		background-color: rgba(245, 166, 35, 100);
		float: left;
		position: relative;
		top: 16rpx;
		left: 36rpx;
	}
	.associationTitle{
		position: relative;
		left: 50rpx;
		padding-bottom: 20rpx;
		width: 120rpx;
		height: 68rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 48rpx;
		text-align: left;
		  ;
	}
</style>
